<template>
  <div
    class="zz-message"
    v-if="visible">

    <div class="zz-message-com">
      <div class="zz-dialog-header border-bottom clear">
        <slot name="title">
          <b class="zz-dialog-title orange">{{title}}</b>
        </slot>
        <div class="zz-dialog-headerbtn">
          <i class="iconfont icon-x" @click='closeX()'></i>
        </div>
      </div>
      <div class="zz-message__group">
        <p>{{ message }}</p>
      </div>
      <div class="zz-dialog-footer">
        <div class="footer-right">
          <button class="cancel" type="button" @click.stop="close()">{{closeValue}}</button>
          <button class="confirm" type="button" @click.stop="confirm()">{{confirmValue}}</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script type="text/babel">
  export default {
    data () {
      return {
        visible: false,
        title: '提醒',
        message: '',
        type: 'info',
        postop: '5%',
        onClose: null,
        confirmValue: '确定',
        closeValue: '取消',
        showClose: true,
        closed: false
      }
    },

    computed: {
      typeImg () {
        return 'icon-' + this.type
      }
    },

    watch: {
      closed (newVal) {
        if (newVal) {
          this.visible = false
          this.$el.addEventListener('transitionend', this.destroyElement)
        }
      }
    },

    methods: {
      destroyElement () {
        this.$el.removeEventListener('transitionend', this.destroyElement)
        this.$destroy(true)
        this.$el.parentNode.removeChild(this.$el)
      },

      closeX () {
        this.closed = true
      },
      close () {
        this.closed = true
        if (typeof this.onClose === 'function') {
          this.onClose(this)
        }
      },

      confirm () {
        if (typeof this.onConfirm === 'function') {
          this.onConfirm(this)
        }
      }
    }
  }
</script>

<style scoped lang="scss">
  .zz-message{
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    top: 0;
    left: 0;
    z-index: 10;
    .zz-dialog-header{
      background: #fff;
      height: 15px;
      line-height: 15px;
      padding: 15px 20px;
      font-size: $font-size-base;
      border-bottom: 1px solid $color-line;
      border-top-left-radius: 3px;
      border-top-right-radius: 3px;
      .zz-dialog-title{
        float: left;
        font-size: $font-size-large;
      }
      .zz-dialog-headerbtn{
        float: right;
        color: #afbcc2;
        cursor: pointer;
      }
      .zz-dialog-headerbtn:hover{
        color: $red;
      }
      .icon-x{
        font-size: 1.5rem
      }
    }
    .zz-message-com{
      width: 500px;
      margin: 20% auto;
      background: #fff;
      text-align: left;
      line-height:2rem;
      .zz-message__img{
        width: 2rem;
        font-size: 1.5rem;
        display: inline-block;
      }
      .icon-error{
        color: #f35b5a;
      }
      .icon-warning{
        color: #00b589;
      }
      .icon-success{
        color: #00b589;
      }
      .zz-message__group{
        display: inline-block;
        vertical-align: top;
        padding: 15px 20px;
        p{
          margin: 0;
        }
      }
    }
    .zz-dialog-footer{
      border-top: 1px $color-line solid;
      padding: 0.5rem;
      background: $color-bg;
      .foot-confirm{
        height: 34px;
        line-height: 30px;
      }
      .confirm{
        cursor: pointer;
        border: none;
        background: none;
        color: $color;
        min-width: 40px;
        margin-left: 7px;
      }
      .cancel{
        cursor: pointer;
        border: none;
        background: none;
        min-width: 40px;
      }
      .footer-right{
        //float: right;
        text-align: right;
      }
    }
  }
</style>
